<script setup lang="ts">

</script>

<template>
    <div class="left-Top">
        <div class="left-Top-img">
            <span style="padding: 10px; color: aliceblue; font-size: 1.5rem; line-height: 3rem;">环境监测</span>
        </div>
        <div class="left-Top-bottom">
            <div class="left-Top-bottom-Top">
                <div>℃</div>
                <div>～ ℃</div>
                <div style="color: chocolate; font-size: 18px; font-weight: 900;">高温黄色预警</div>
            </div>

            <div class="left-Top-bottom-Main">
                <div>
                    <img src="../../assets/icon/智能检测/体感 2.png" />
                    体感
                </div>
                <div>
                    <img src="../../assets/icon/智能检测/风力 2.png" />风力
                </div>
                <div>
                    <img src="../../assets/icon/智能检测/湿度 2.png" />
                    湿度
                </div>
            </div>

            <div class="left-Top-bottom-Foot">
                <div>今日天气</div>
                <div>明日天气</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.left-Top {
    width: 28rem;
    height: 30rem;
    margin: 6rem 6rem;
    background-color: rgb(16, 29, 91);

    &-img {
        width: 100%;
        height: 3rem;
        background: url('../../assets/images/leftImg.png') no-repeat center center;
        background-size: 100% 100%;
    }

    &-bottom {
        width: 100%;
        height: 25rem;
        margin-top: 2rem;
        background-color: rgb(29, 46, 107);

        &-Top {
            width: 96%;
            height: 4rem;
            margin: 2%;
            display: flex;
            text-align: center;
            align-items: center;
            color: white;

            >div {
                flex: 1;
                font-size: 24px;
            }
        }

        &-Main {
            width: 96%;
            height: 15rem;
            margin: 2%;

            >div {
                width: 100%;
                height: 4rem;
                border: 1px solid #fff;
                line-height: 4rem;
                color: white;
                font-size: 24px;
                padding: 0 1rem;
            }
        }

        &-Foot {
            width: 96%;
            height: 4rem;
            margin: 2%;
            display: flex;
            text-align: center;
            align-items: center;
            color: white;

            >div {
                flex: 1;
                font-size: 24px;
            }
        }
    }
}
</style>